import React, {useState} from 'react';
import './Handle.less';
import {useEffect} from 'react'
import {
    SwapOutlined, ArrowDownOutlined, PushpinOutlined, SearchOutlined,
    ArrowUpOutlined, RedoOutlined
} from '@ant-design/icons';
import {Select, Input} from 'antd';
import {Button} from 'antd';
import http from '../../../utils/http'
import store from "../../../store/store";
// import * as echarts from 'echarts';

const {Option} = Select;

function Handle(props) {

    useEffect(() => {
        http({
            url: 'api/type/goodsType',
            method: "post"
        }).then((res => {
            let type1name = []
            let type2List = {}
            res.data.forEach(item => {
                type1name.push(item.name)
                type2List[item.name] = []
                item.children.forEach(i => {
                    type2List[item.name].push(i.name)
                })
            })
            setType1(type1name)
            setType2(type2List)
        }))
        props.getChildData(1,0,10,0,"","","","")
        // getList(1,0,10,"","","","")
    },[])
/*
    const getList=(page,rank,size,moneyFrom,moneyTo,name,type)=>{
        http({
            url: '/goods/getStockGoodsList',
            method: "post",
            params: {
                page,rank,size,moneyFrom,moneyTo,name,type
            }
        }).then((res => {
            res.data.forEach(item=>{
                item.status=false
            })
            console.log(res.data)
            setData(res.data)
            props.getChildData(JSON.stringify(res.data))
        }))
    }
*/
    const [type1, setType1] = useState([]);
    const [type2, setType2] = useState({});
    // //  排序选择，默认为1
    const [count, setCount] = useState(0);
  
    //select需要循环的二级分类数组
    const [type2Name, setType2Name] = useState([]);
    //一级分类的值
    const [firstType, setFirstType] = useState("");
    // 二级分类的值
    const [secondType, setSecondType] = useState("");
   
    const [lowestData, setLowestData] = useState("");
    const [highestData, setHighestData] = useState("");
    const [nameData, setnameData] = useState("");
    const [nameData2, setnameData2] = useState("");
    const [height,setHeight]=useState(true)
    
    const countChange = function (a) {
        // set0()
        setCount(a)
        store.setCount(a)
    }
    const type1Change = value => {
        // console.log(type2, value)
        setType2Name([...type2[value]]);
        //二级设为空
        setSecondType("");
        // 一级获取当前值
        setFirstType(value)
        store.setType(value)
        // console.log(1,firstType)
        store.setLeval(1)
    };
    
    const type2Change = value => {
        setSecondType(value);
        store.setLeval(2)
        store.setType(value)
    };
    
    const lowest = (ev) => {
        console.log(ev.target.value)
        setLowestData(ev.target.value)
        store.setLowestData(ev.target.value)
    }
    
    const highest = (ev) => {
        console.log(ev.target.value)
        setHighestData(ev.target.value)
        store.setHighestData(ev.target.value)
    }
    const nameChange = (ev) => {
        setnameData(ev.target.value)
    }
    const nameChange2 = (ev) => {
        setnameData2(ev.target.value)
    }
   // 这个数据需要传递用来查询数据重新渲染页面
 
    const set0 = () => {
        store.setCount(0)
        setCount(0)
        setType2Name([])
        store.setType(0)
        setSecondType("");
        setFirstType("")
        setLowestData("")
        store.setLowestData("")
        setHighestData("")
        store.setHighestData("")
        setnameData("")
        setnameData2("")
        store.setnameData("")
    }
    let close = () => {
        setHeight(!height);
    }
    const reset = () => {
        set0()
        //    发送请求
        props.getChildData(1,0,10,2,"","","","")
    }
   /* let leval = 0
    if (firstType!=""&&secondType==""){
        leval=1
    }else if(firstType==""){
        leval=2
    }*/
    
    let searchData ={
        page:1,
        rank:store.count,
        size:10,
        moneyFrom:lowestData,
        moneyTo:highestData,
        name:height==true?nameData:nameData2,
        type:secondType==""?firstType:secondType,
        typeLevel:store.leval
    }
    store.setnameData(searchData.name)
    const search = () => {
        let data1 = searchData
        if (height==false){
            set0()
            data1.type=""
            data1.moneyFrom=""
            data1.moneyTo=""
        }else {
            setnameData2("")
        }
        // console.log(data1.typeLevel)
        //用data请求
        props.getChildData(1,data1.rank,10,data1.typeLevel,data1.moneyFrom,data1.moneyTo,data1.name,data1.type)
    }
   
    return (
        <div id='handleSelect'>
            <div id='handleHandle'>
                <div className='handleHandle' style={{height:height ? '140px' : '0px'}}>
                    <div className='handleLeft'>
                        <div className="icons-list">
                            <div className='handleForm'>
                                <SwapOutlined className='hanDleIcon'/>
                                <span style={{marginLeft: '20px'}}>排序</span>
                                <Button style={{fontSize: '12px'}} type={store.count === 0 ? 'primary' : 'text'} shape="round"
                                        size='small' className='bt'
                                        onClick={() => {
                                            countChange(0)
                                        }
                                        }>
                                    默认排序
                                </Button>
                                <Button style={{fontSize: '12px'}} type={store.count === 1 ? 'primary' : 'text'} shape="round"
                                        size='small' className='bt'
                                        onClick={() => {
                                            countChange(1)
                                        }
                                        }>
                                    在售最低价<ArrowDownOutlined/>
                                </Button>
                                <Button style={{fontSize: '12px'}} type={store.count === 2 ? 'primary' : 'text'} shape="round"
                                        size='small' className='bt'
                                        onClick={() => {
                                            countChange(2)
                                        }
                                        }>
                                    月销量最高<ArrowDownOutlined/>
                                </Button>
                            </div>
                            <div className='handleForm'>
                                <PushpinOutlined className='hanDleIcon'/>
                                <span style={{marginLeft: '20px'}}>筛选</span>
                                <span style={{marginLeft: '20px'}}>商品分类：</span>
                                <>
                                    <Select className='se' value={firstType} onChange={type1Change} size='small'>
                                        {type1.map((item, index) => (
                                            <Option key={index} value={item}>{item}</Option>
                                        ))}
                                    </Select>
                                    <Select className='se' value={secondType} onChange={type2Change} size='small'>
                                        {type2Name.map((item, index) => (
                                            <Option key={index} value={item}>{item}</Option>
                                        ))}
                                    </Select>
                                </>
                                <span style={{marginLeft: '20px'}}>价格区间：</span>
                                <Input placeholder="最低价格" className='se' size='small' onChange={lowest}
                                       value={lowestData}/><span>至
                  </span><Input className='se' placeholder="最高价格" size='small' onChange={highest} value={highestData}/>
                            </div>
                            <div className='handleForm'>
                                <SearchOutlined className='hanDleIcon'/>
                                <span style={{marginLeft: '20px'}}>搜索</span>
                                <span style={{marginLeft: '20px'}}>精准搜索：</span>
                                <Input placeholder="商品名称" style={{width: 250}} size='small' value={nameData}
                                       onChange={nameChange}/>
                            </div>
                        </div>
                    </div>
                    {/* <div className='handleRight'>
              <div className='echarts'>
        
              </div>
              <div className='echarts'>
        
              </div>
            </div>*/}
                </div>
                <div className='bottom'>
                    <Button
                        type="primary"
                        icon={height ? <ArrowUpOutlined/> : <ArrowDownOutlined/>}
                        style={{backgroundColor: '#171c49', fontSize: '12px'}}
                        size='small'
                        className='bottomBtn'
                        onClick={close}
                    >
                        {height ? "收起" : "展开"}
                    </Button>
                    <Button type="primary" icon={<RedoOutlined/>}
                            style={{backgroundColor: '#ffc306', fontSize: '12px'}}
                            size='small'
                            className='bottomBtn'
                            onClick={reset}
                    >
                        重置
                    </Button>
                    <Button onClick={search} style={{fontSize: '12px'}} type="primary" icon={<SearchOutlined/>}
                            size='small'>
                        搜索
                    </Button>
                    <input type="text"
                           placeholder='请输入商品名称'
                           className='handleInput'
                           value={nameData2}
                           onChange={nameChange2}
                           style={{display:height ? 'none' : 'inline'}}/>
                </div>
            </div>
        </div>
    )
}

export default Handle;